import React, { memo } from "react";
import { NavLink } from "react-router-dom";
import { ImgBoxStyle } from "./style";
import { getSizeImage, getCount } from "@/utils/format-utils.js";

export default memo(function ImgBox(props) {
  return (
    <ImgBoxStyle>
      <div className="playlist-box">
        <img
          src={props.imgUrl == "" ? "" : getSizeImage(props.imgUrl, 140)}
          alt=""
        />
        <NavLink
          to={{
            pathname: "/discover/playlist/" + props.userId,
            query: { id: props.userId },
          }}
          className="msk coverall"
          title={props.name}
        ></NavLink>
        <div className="msk-bottom coverall">
          <a className="msk-play fr"> </a>
          <span className="msk-icon-headset fl"></span>
          <span className="msk-nb fl">{getCount(props.playCount)}</span>
        </div>
      </div>
    </ImgBoxStyle>
  );
});
